<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听器入门</title>
</head>
<body>
<div id="app">
    <div>
        <span>名：</span>
        <span><input type="text" v-model.lazy="firstName"></span>
    </div>
    <div>
        <span>姓：</span>
        <span><input type="text" v-model.lazy="lastName"></span>
    </div>
    <div>{{fullName}}</div>
</div>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    /*侦听器*/
    var vue = new Vue({
        el: "#app",
        data: {
            firstName: "Jim",
            lastName: "Green",
            // fullName: "Jim Green"
        },
        computed: {
            fullName: function () {
                return this.firstName + " " + this.lastName;
            }
        },
        watch: {
            // firstName: function (val) {
            //     this.fullName = val + " " + this.lastName;
            // },
            // lastName: function (val) {
            //     this.fullName = this.firstName + " " + val;
            // }
        }
    })
</script>
</body>
</html>
